<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>紫色鹭</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/style_zj.css">
    <link rel="stylesheet" href="../layui/css/layui.css"/>
</head>
<body>
<div id="header_01_html">
    <iframe id="header_01" src="head_01.html" frameborder="0"></iframe>
</div>
<div id="head_search_html">
    <iframe id="head_search" src="head_search.html" frameborder="0"></iframe>
</div>
<div class="container my_order">
    <div class="text-tap">
        <div :class="!state?'list active-sty1':'list'">全部订单<span v-show="state==''?true:false">[{{total}}]</span></div>
        <div :class="state == 1?'list active-sty1':'list'" :state="1">待付款<span v-show="state==1?true:false">[{{total}}]</span></div>
        <div :class="state == 2?'list active-sty1':'list'" :state="2">待发货<span v-show="state==2?true:false">[{{total}}]</span></div>
        <div :class="state == 3?'list active-sty1':'list'" :state="3">待确认收货<span v-show="state==3?true:false">[{{total}}]</span></div>
        <div :class="state == 4?'list active-sty1':'list'" :state="4">交易成功<span v-show="state==4?true:false">[{{total}}]</span></div>
        <div :class="state == 5?'list active-sty1':'list'" :state="5">交易关闭<span v-show="state==5?true:false">[{{total}}]</span></div>
        <div :class="state == 6?'list active-sty1':'list'" :state="6">已评价<span v-show="state==6?true:false">[{{total}}]</span></div>
    </div>
    <div class="mart-23" style="margin-bottom: 10px;">
        <table class="table-show">
            <thead>
            <tr class="data-list">
                <th class="td-w1">货品</th>
                <th class="td-w2">单价</th>
                <th class="td-w3">数量</th>
                <th class="td-w4">实付款（元）</th>
                <th class="td-w5">订单状态</th>
                <th class="td-w6">交易操作</th>
            </tr>
            </thead>
        </table>
    </div>
    <div class="data-list">
        <div class="list" v-for="items in list">
            <div class="top">
                <!--<span class="icon_checkbox marr-7"></span>-->
                <span>订单号：</span>
                <span class="marr-35">{{items.id}}</span>
                <span>下单时间：</span>
                <span>{{items.crtTime}}</span>
                <div class="fr store_name">
                    <span class="icon_store v-tt marr-13"></span>
                    <span>{{items.storeName}}</span>
                </div>
            </div>
            <table>
                <tbody>
                <tr v-for="item in items.commodties">
                    <td class="td-w1 text-l">
                        <div class="img-png">
                            <img v-for="(it,index) in item.picUrl" v-if="index == 0" :src="imgBaseUrl + it" alt="">
                        </div>
                        <span class="img-text">{{item.commodityName}}</span>
                    </td>
                    <td class="td-w2">¥{{item.retailPrice}}</td>
                    <td class="td-w3">{{item.count}}</td>
                    <td class="td-w4">
                        <div class="col-red1">¥{{item.marketPrice}}</div>
                        <!--<div>(含运费100)</div>-->
                    </td>
                    <td class="col-red1 td-w5">
                        <span v-if="items.state == 1">待付款</span>
                        <span v-if="items.state == 2">待发货</span>
                        <span v-if="items.state == 3">待确认收货</span>
                        <span v-if="items.state == 4">交易成功</span>
                        <span v-if="items.state == 5">交易关闭</span>
                        <span v-if="items.state == 6">已评价</span>
                    </td>
                    <td class="td-w6">
                        <div class="button" v-if="items.state == 1" @click="jumpPay(items.id)">付款</div>
                        <div class="button" v-if="items.state == 3" @click="getProduct(items.id)">确认收货</div>
                        <div class="button" @click="goOrderDetail(items.id)">订单详情</div>
                        <div class="cur-p js-showPinJia" :id="items.id" v-if="items.state == 4">评价</div>
                    </td>
                </tr>
                </tbody>
            </table>

        </div>
    </div>
    <div id="test1"></div>
</div>
<div class="tabRight">
    <div class="first">
        <ul>
            <li><a target="_blank" class="icon_admin_white" title=""></a></li>
            <li>
                <a target="_blank" class="go-shopcard c-fff">
                    <i class="icon_shopcar_white"></i>
                    <p class="mt10">购<br>物<br>车</p>
                    <span class="car-num pos-Sty1">0</span>
                </a>
            </li>
            <li>
                <a target="_blank" class="icon_list_white mt10 go-myorder" title="订单"></a>
                <a target="_blank" class="icon_collect_white mt10 go-myhas" title="收藏"></a>
                <a target="_blank" class="icon_history_white mt10 go-record" title="记录"></a>
            </li>
        </ul>
    </div>
    <div class="second">
        <a target="_blank" class="icon_edit_white"></a>
        <a target="_blank" class="icon_top_white mt10"></a>
    </div>
</div>
<!--评价模态框-->
<div class="modal-pinJia" style="display: none">
    <div class="mask-pj close-modal-v"></div>
    <div class="content-pj">
        <div class="title">订单评价</div>
        <div class="status-text js-starStatus">星级</div>
        <div>
            <i class="start-sty0 cur-p js-chooseStar"></i><i class="start-sty0 cur-p js-chooseStar"></i><i class="start-sty0 cur-p js-chooseStar"></i><i class="start-sty0 cur-p js-chooseStar"></i><i class="start-sty0 cur-p js-chooseStar"></i>
        </div>
        <textarea class="container-text" name="" id="" cols="80" rows="10" placeholder="亲，哪里不满意，请写评价告诉我们"></textarea>
        <div>
            <span class="btn-sty close-modal-v">取消</span><span class="btn-sty1 js-submitSatrt">提交</span>
        </div>
    </div>
</div>
</body>
<script src="../js/config.js"></script>
<script>
    var saveOrderId = '';

    var limit = 10;
    var offset = 1;
    var count;
    var state = getUrlParam("state")?getUrlParam("state"):''
    var app = new Vue({
        el: '.my_order',
        data: {
            list:'',
            imgBaseUrl:imgBaseUrl,
            state:state,
            total:'',
        },
        beforeCreate: function () {
            get_ajaxPage("/sys/order/getMyPage", {limit: limit, offset: offset,state:state}, function (data) {
                data.data.forEach(function (items) {
                    items.commodties.forEach(function (item) {
                        item.picUrl?item.picUrl = item.picUrl.split(","):'';
                    })
                })
                app.list = data.data


                app.total = data.count;
                layui.use('laypage', function(){
                    var laypage = layui.laypage;
                    //执行一个laypage实例
                    laypage.render({
                        elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
                        ,count: app.total //数据总数，从服务端得到
                        ,limit:limit
                        ,jump: function(obj, first){
                            //obj包含了当前分页的所有参数，比如：
                            console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                            console.log(obj.limit); //得到每页显示的条数
                            //首次不执行
                            if(!first){
                                get_ajaxPage("/sys/order/getMyPage", {limit: limit, offset: obj.curr,state:state}, function (data) {
                                    data.data.forEach(function (items) {
                                        items.commodties.forEach(function (item) {
                                            item.picUrl?item.picUrl = item.picUrl.split(","):'';
                                        })
                                    })
                                    app.list = data.data
                                    app.total = data.count;
                                })
                            }
                        }
                    });
                });





            })
        },
        updated: function () {

        },
        methods:{
            jumpPay:function (id) {
                get_confirm("确认立即支付？",function () {
                    window.open("pay.html?id="+id)
                })
            },
            getProduct:function (id) {
                get_confirm("确认立即收货？",function () {
                    get_ajax("/sys/order/receiving",{id:id},function (data) {
                        location.reload();
                    })
                })
            },
            goOrderDetail:function (id) {
                location.href='order_detail.html?id='+id
            }


        }
    })

    $("body").on("click",".text-tap .list",function () {
        var href = "my_order.html";
        href = $(this).attr("state")?href+"?state="+$(this).attr("state"):href;
        location.replace(href);
    })

    $(document).on('click','.js-showPinJia',function(){
        $('.modal-pinJia').show();
        saveOrderId = $(this).attr('id');
    })
    $(document).on('click','.close-modal-v',function(){
        $('.modal-pinJia').hide();
    })
    $(document).on('click','.js-chooseStar',function(){
        $(this).toggleClass('start-sty1');
        var length = $(document).find('.start-sty1').length;
        if(length<=2){
            $('.js-starStatus').html('很差');
        }else if(length<=4){
            $('.js-starStatus').html('满意');
        }else{
            $('.js-starStatus').html('5星好评');
        }
    })
    $(document).on('click','.js-submitSatrt',function(){
        var length = $(document).find('.start-sty1').length || 5;
        get_ajax("/sys/order/orderRate", {grade:length,content:$('.container-text').val(),id:saveOrderId}, function (data) {
            $('.modal-pinJia').hide();
            location.reload();
        })
    })
</script>
</html>